<template>
  <el-row :gutter="20" class="m-t-5px">
    <el-col
      :span="6"
      :lg="4"
      :md="12"
      :sm="12"
      :xs="24"
      v-for="(item, index) in cardList"
      :key="index + new Date().getTime()"
    >
      <!--  -->
      <el-card
        class="rounded-md dark:bg-black"
        shadow="hover"
        :style="{ backgroundColor: item.hexColorCode }"
      >
        <div
          class="flex justify-between"
          @click="getdeliveryDurationRange(item)"
        >
          <span class="card-panel-text">{{ item.deliveryDurationRange }}</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <!-- :style="{ color: item.hexColorCode, cursor: pointer }" -->
        <div class="text-2xl" @click="getdeliveryDurationRange(item)">
          <span class="card-panel-num">{{
            item.quantityToBeReturned ? noFixed(item.quantityToBeReturned) : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>

        <div
          class="flex justify-between"
          @click="getdeliveryDurationRange(item)"
        >
          <span class="text">占比</span>
          <span
            ><span class="text">{{ item.deliveryDurationRatio }}%</span></span
          >
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script >
// import { reactive } from "vue";
import { selectDeliveryDurationData } from "@/api/sample/sampleApply";

export default {
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // row: {},
      opendialogApply: false,
      crowdTrendeList: {},
      //Sku传递数据
      echartDataSku: {
        columns: [],
        rows: [],
      },
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      selectDeliveryDurationData(this.row).then((response) => {
        this.cardList = response;
      });
    },
    getdeliveryDurationRange(item) {
      this.$emit("getdeliveryDurationRange", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-md {
  color: white;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  text-decoration: underline;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
